Loading...

This site

First of all, you have to say that play random music from the play button next to this text. It starts playing a set of posts in the music category.

Why

I've been thinking for a long time that I need a site where I collect everything I've done over the years. Things tend to be forgotten so some kind of database is good to have. I started making these pages already a year ago when I wanted to try making a background image, but then I stopped making these pages because I had to do other projects intensively.

Background

The wallpaper is built from div elements and if you click on a box down there, it will randomly send a dot along those lines. That point is just a div with a CSS gradient shadow to make it look great. With Webkit it just almost crashes the whole browser and with Firefox it works just fine, at least for me.

Techniques

When building the wallpaper, I tested how to use stimulus controls and turbo to turn the site into a one-page application. In the background here is symfony and for building content management I use sonata. The database is mariadb. These I run docker in containers.

Code

Here's the uncensored code for that top corner wallpaper. Let me point out once again that I did this 2021. Of course, in addition to this, I have used a lot of SCSS. I wonder if anyone would like to see it? Put miles :)

import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
  static targets = ["plane", "cells"];
  initialize() {
    this.BuildGrid();
    this.addAndRemoveSquare();
  }
  BuildGrid() {
    this.makeRows(25, this.planeTarget);
    this.makeColumns(25);
  }
  //Takes (rows, columns) input and makes a grid
  makeRows(rowNum, el) {
    //Creates rows
    for (var r = 0; r < rowNum; r++) {
      let row = document.createElement("div");
      el.appendChild(row).className = "BgridRow";
    }
  }
  //Creates columns
  makeColumns(cellNum) {
    let rows = document.getElementsByClassName("BgridRow");
    let count = 0;
    for (var j = 0; j < cellNum; j++) {
      for (var i = 0; i < rows.length; i++) {
        let newCell = document.createElement("div");
        newCell.setAttribute("data-bgrid-target", "cells");
        newCell.setAttribute("data-bgrid-id-param", count);
        newCell.setAttribute("data-action", "click->bgrid#cellClick");
        rows[j].appendChild(newCell).className = "cell";
        count++;
      }
    }
  }
  connect() {
    //console.log(this.cellsTargets)
  }
  createDivDot(id) {
    let cell = this.cellsTargets[id];
    let direction = Math.floor(Math.random() * 4);
    let allowRight = true;
    let allowLeft = true;
    let allowUp = true;
    let allowDown = true;
    let rowId = id % 100;
    if (rowId >= 50) {
      // scale row numbers
      rowId = rowId - 50;
    }
    if (rowId < 25) {
      // only allow right direction
      allowLeft = false;
      allowUp = false;
      allowDown = false;
    }
    //console.log(allowRight, allowLeft, allowUp, allowDown )
    if (direction === 0 && allowRight) {
      this.moveDot(cell, "Right");
    } else if (direction === 1 && allowUp) {
      this.moveDot(cell, "Up");
    } else if (direction === 2 && allowDown) {
      this.moveDot(cell, "Down");
    } else if (direction === 3 && allowLeft) {
      this.moveDot(cell, "Left");
    }
  }
  moveDot(cell, dir) {
    let mclass = "move" + dir;
    let dot = document.createElement("div");
    dot.className = "dot";
    cell.appendChild(dot);
    void dot.offsetHeight;
    dot.classList.add(mclass);
    setTimeout(() => {
      cell.removeChild(dot);
    }, 3100);
  }
  createSVGDot(id) {
    const svgns = "http://www.w3.org/2000/svg";
    let svg = document.createElementNS(svgns, "svg");
    svg.setAttribute("fill", "none");
    svg.setAttribute("viewBox", "0 0 10 10");
    svg.setAttribute("stroke", "none");
    let rect = document.createElementNS(svgns, "rect");
    rect.setAttribute("x", 0);
    rect.setAttribute("y", 0);
    rect.setAttribute("width", "10px");
    rect.setAttribute("height", "5px");
    rect.setAttribute("fill", "#ff00ff");
    svg.appendChild(rect);
    id.appendChild(svg);
  }
  addAndRemoveSquare() {
    if (!document.hidden) {
      let activate_cell_number = Math.floor(
        Math.random() * this.cellsTargets.length
      );
      let deactivate_cell_number = Math.floor(
        Math.random() * this.cellsTargets.length
      );
      this.cellsTargets[activate_cell_number].className = "cell active";
      this.cellsTargets[deactivate_cell_number].className = "cell";
      //this.createDivDot(deactivate_cell_number);
      var timer = setTimeout(() => {
        this.addAndRemoveSquare();
        //console.log('addSquare')
      }, 4000);
    } else {
      console.log("stop animations");
      clearInterval(timer);
    }
  }

  cellClick({ params: { id } }) {
    //this.createSVGDot(this.cellsTargets[id+3]);
    this.createDivDot(id);
    // console.log(id);
  }
}